<template>
<div class="app-container calendar-list-container">
   <el-row style="margin-bottom:20px">
      <el-col :span="24">
        <el-card class="box-card" shadow="never">
          <div style="widht:100%;margin-left:50px;" v-if="refundWay == 2 && refundStatus != -10 && refundStatus != 50">
            <el-steps :active="stepActive" align-center>
              <el-step title="买家申请维权" :description="orderInfo.createTime"></el-step>
              <el-step title="商家处理退款申请" :description="orderInfo.shopDisposeTime"></el-step>
              <el-step title="退款完成" :description="orderInfo.refundTime"></el-step>
            </el-steps>
          </div>
          <div style="widht:100%;margin-left:50px;" v-if="refundWay == 1 && refundStatus != -10 && refundStatus != 50">
            <el-steps :active="stepActive" align-center>
              <el-step title="买家申请维权" :description="orderInfo.createTime"></el-step>
              <el-step title="商家处理退款申请" :description="orderInfo.shopDisposeTime"></el-step>
               <el-step title="买家退货给商家" :description="orderInfo.shopDisposeTime"></el-step>
              <el-step title="退款完成" :description="orderInfo.refundTime"></el-step>
            </el-steps>
          </div>
          <div style="widht:100%;margin-left:50px;" v-if="refundStatus == -10 || refundStatus == 50">
            <el-steps :active="stepActive" align-center>
              <el-step title="买家申请维权" :description="orderInfo.createTime"></el-step>
              <el-step title="退款关闭" :description="orderInfo.closeTime" ></el-step>
            </el-steps>
          </div>
        </el-card>
      </el-col>
   </el-row>
  <el-row>
    <el-col :span="8">
      <el-card class="box-card" shadow="never" style="height:372px;">
        <div slot="header" class="clearfix">
          <span>售后维权</span>
        </div>
        <div class="text item">
          <span>期望结果:</span><span>{{orderInfo.refundWayName}}</span>
        </div>
        <div class="text item">
          <span>退款金额:</span><span>	{{orderInfo.userApplyAmount | currency('￥')}} 元</span>
        </div>
        <div class="text item">
          <span>维权原因:</span><span>{{orderInfo.refundReason}}</span>
        </div>
        <!--
        <div class="text item">
          <span>维权编号:</span><span>{{orderInfo.refundNote}}</span>
        </div>-->
        <hr width="100%" style="border-bottom:1px dashed;border-top:0px;">
        <div class="text item">
          <span>订单编号:</span><span>	{{orderInfo.orderSn}}</span>
        </div>
        <div class="text item">
          <span>付款时间:</span><span>	{{orderInfo.shopOrder.payTime}}</span>
        </div>
        <div class="text item">
          <span>买 家:</span><span>{{orderInfo.shopOrder.userName}}</span>
        </div>
        <div class="text item">
          <span>物流信息:</span>
          <span v-if="orderInfo.shopOrder.logisticsStatus != 0 ">物流公司:{{orderInfo.shopOrder.logisticsCompany}},物流单号:{{orderInfo.shopOrder.logisticsInt}}</span>
          <span v-elseif>-</span>
        </div>
        <div class="text item">
          <span>运 费:</span><span>{{orderInfo.shopOrder.freightAmount | currency('￥')}} 元</span>
        </div>
        <!--
        <div class="text item">
          <span>合计优惠:</span><span>	0.00 元</span>
        </div>-->
        <div class="text item">
          <span>实付金额:</span><span>	{{orderInfo.shopOrder.productAmount | currency('￥')}} 元</span>
        </div>      
      </el-card>
    </el-col>
    <el-col :span="16">
      <el-card class="box-card" shadow="never" style="height:372px;">
        <div slot="header" class="clearfix">
          <div v-if="refundStatus === 1"><i class="el-icon-warning"></i><span>等待商家处理退款申请</span></div>
          <div v-if="refundWay == 1 && refundStatus === 20"><i class="el-icon-warning"></i><span>商家已同意退款，请退货给商家</span></div>
          <div v-if="refundWay == 1 && refundStatus == 30"><i class="el-icon-warning"></i><span>已退货,等待商家确认收货</span></div>
          <div v-if="refundStatus === 60"><i class="el-icon-warning"></i><span>退款成功</span></div>
          <div v-if="refundStatus == -10 || refundStatus == 50"><i class="el-icon-warning"></i><span>退款关闭</span></div>
        </div>
        <div class="text item" v-if="refundWay == 2 && refundStatus === 1">
          <span>收到买家仅退款申请,请尽快处理</span><br/>
          <span>请在7天内确认，如逾期未处理,将自动同意退款</span>
        </div>
        <div class="text item" v-if="refundWay == 1 && refundStatus === 1">
          <span>收到买家退款并退货申请,请尽快处理</span><br/>
          <span>请在7天内确认，如逾期未处理,将自动发送退货地址</span>
        </div>
        <div class="text item" v-if="refundWay == 1 && refundStatus === 20">
          <span>你已同意退款协议,请等待买家处理</span><br/>
          <span>买家在7天内未响应，退款申请将自动关闭</span>
        </div>
        <div class="text item" v-if="refundWay == 1 && refundStatus == 30">
          <span>买家已退货</span><br/>
          <span>请在7天内确认，如逾期未处理将自动退款给买家</span>
        </div>
        <div class="text item" v-if="refundStatus == -10 || refundStatus == 50">
          <span>本次退款已被撤销</span>
        </div>
        <div class="text item" v-if="refundStatus === 60">
          <span>退款金额：{{orderInfo.shopCheckAmount | currency('￥')}} 元</span>
        </div>
        <el-button v-if="refundWay == 2 && refundStatus === 1" size="small" type="success" @click="handleDialog(1)">同意买家退款</el-button>
        <el-button v-if="refundWay == 1 && refundStatus === 1" size="small" type="success" @click="handleDialog(2)">同意退货,发送退货地址</el-button>
        <el-button v-if="refundWay == 1 && refundStatus === 30" size="small" type="success" @click="handleDialog(3)">确认收货并退款</el-button>
        <el-button v-if="refundStatus === 1" size="small"  @click="handleDialog(4)">拒绝退款申请</el-button>
        <el-button v-if="refundWay == 1 && refundStatus === 30" size="small" @click="handleDialog(5)">拒绝确认收货</el-button>
        <hr width="100%" style="border-bottom:1px dashed;border-top:0px;margin-top:100px;">
        <div class="text item" v-if="refundStatus === 60">
          <span>提醒：申请退款成功后1～15个工作日到账。</span>
        </div>
        <div class="text item" v-if="refundStatus === 1">
          <span>提醒：</span><br/>
          <span>如果未发货,请点击同意退款给买家</span><br/>
          <span>如果实际已发货,请主动与买家联系。</span><br/>
          <span>如果你逾期未处理,视作同意买家申请,系统将自动退款给买家。</span>
        </div>
        <div class="text item" v-if="refundWay == 1 && refundStatus === 20">
          <span>提醒：</span><br/>
          <span>收到买家退货时,请及时验货</span><br/>
          <span>如买家未提交物流信息,但实际你已收到退货,你可以直接同意退款。</span><br/>
        </div>
        <div class="text item" v-if="refundWay == 1 && refundStatus === 30">
          <span>提醒：</span><br/>
          <span>收到买家退货时,请及时验货</span><br/>
          <span>如果你逾期未处理,将自动退款给买家。</span><br/>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <!-- 同意退货,发送退货地址 -->
  <el-dialog :title="refundTitle" :visible.sync="returnDialogFormVisible">
    <el-form :model="refundForm" :rules="rules" ref="refundForm" label-width="100px">
      <el-row class="el-row-margin item">
        <el-col :span="4"><label>处理方式:</label></el-col>
        <el-col :span="16"><span>{{refundForm.refundWayName}}</span></el-col>
      </el-row>
      <el-row class="el-row-margin item">
        <el-col :span="4"><label>退款数量:</label></el-col>
        <el-col :span="16"><span>{{refundForm.goodsCount}}</span></el-col>
      </el-row>
      <el-row class="el-row-margin item">
        <el-col :span="4"><label>退款金额:</label></el-col>
        <el-col :span="16"><span>{{refundForm.userApplyAmount | currency('￥')}}元</span></el-col>
      </el-row>
      <!-- 拒绝退款 -->
      <el-row class="el-row-margin" v-if="handleFlag === 4 || handleFlag === 5">
        <el-col :span="4"><label>拒绝理由:</label></el-col>
        <el-col :span="16"><el-input type="textarea" :autosize="{ minRows: 3, maxRows: 5}" placeholder="请输入拒绝理由" v-model="refundForm.smsTemplate"> </el-input></el-col>
      </el-row>

      <!-- 同意退货,发送退货地址 -->
      <el-row class="el-row-margin" v-if="handleFlag === 2">
        <el-col :span="4"><label>退货地址:</label></el-col>
        <el-col :span="16">
          <span>【{{refundForm.shopShops.linkMan}}收】,{{refundForm.shopShops.provinceName}}{{refundForm.shopShops.cityName}}{{refundForm.shopShops.districtName}}{{refundForm.shopShops.address}},{{refundForm.shopShops.mobile}}</span>
        </el-col>
      </el-row>

      <!-- 确认收到退货 -->
      <el-row class="el-row-margin" v-if="handleFlag === 3">
          <el-col :span="4"><label>退货地址:</label></el-col>
          <el-col :span="16">
            <span>{{refundForm.shopShops.provinceName}}{{refundForm.shopShops.cityName}}{{refundForm.shopShops.districtName}}{{refundForm.shopShops.address}},
              {{refundForm.shopShops.mobile}},{{refundForm.shopShops.linkMan}}</span>
          </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="handleFlag === 4 || handleFlag === 5" @click="refuse('sendForm')">拒绝</el-button>
      <el-button type="primary" v-if="handleFlag === 2" @click="sendAddr('sendForm')">同意退货,发送退货地址</el-button>
      <el-button type="primary" v-if="handleFlag === 3" @click="confirmReceipt()">确认收到退货</el-button>
      <el-button @click="cancelSend('sendForm')">取 消</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
import {
  getObj,
  putObj
} from 'api/shop/order/refund/index';
import { mapGetters } from 'vuex';
import {currency} from '@/utils/index';
export default {
  name: 'orderDetail',
  data() {
    return {
      refundId : undefined,
      refundWay:undefined,
      refundStatus :undefined,
      stepActive: 1,
      refundImgList:[],
      refundDetailList:[],
      orderInfo:undefined,
      refundImgList:[],
      refundDetailList:[],
      handleFlag:undefined,
      returnDialogFormVisible:false,
      refundForm:{
      },
      rules: {
      },
      refundTitle:"退款维权",
      tableKey: 0
    }
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  created() {
    this.refundId = this.$route.query.id
    this.getOrderInfo();
  },
  filters:{
    currency: currency
  },
  methods: {
    getOrderInfo() {
      getObj(this.refundId)
        .then(response => {
          this.listLoading = false;
          this.orderInfo = response.data;
          this.refundImgList = response.data.refundImgList;
          this.refundDetailList = response.data.refundDetailList;
          if(this.orderInfo.refundWay == 2 && this.orderInfo.refundStatus == 1){
            this.stepActive = 1
          }else if(this.orderInfo.refundWay == 2 && this.orderInfo.refundStatus == 20){
            this.stepActive = 2
          }else if(this.orderInfo.refundWay == 2 && this.orderInfo.refundStatus == 60){
            this.stepActive = 3
          }else if(this.orderInfo.orderStatus==1 && this.orderInfo.refundStatus == 1){
            this.stepActive = 1
          }else if(this.orderInfo.orderStatus==1 && this.orderInfo.refundStatus == 20){
            this.stepActive = 2
          }else if(this.orderInfo.orderStatus==1 && this.orderInfo.refundStatus == 30){
            this.stepActive = 3
          }else if(this.orderInfo.orderStatus==1 && this.orderInfo.refundStatus == 60){
            this.stepActive = 4
          }else if(this.orderInfo.refundStatus == 50 || this.orderInfo.refundStatus == -10){
            this.stepActive = 2
          }
          this.refundWay = this.orderInfo.refundWay;
          this.refundStatus = this.orderInfo.refundStatus;
        });
    },
    handleDialog(flag) {
      this.handleFlag = flag;
      this.returnDialogFormVisible = true;
       getObj(this.refundId)
        .then(response => {
          this.refundForm = response.data;
        });
    },
    confirmReceipt(){

    },
    refuse(){

    },
    sendAddr(){

    }
  }
}
</script>
<style>
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 10px;
  }
</style>